/*! purgecss start ignore */
@import './syntax-highlight.css';
/*! purgecss end ignore */

@tailwind components;
@tailwind base;
@tailwind utilities;

/** Scrollbars **/
.dark {
  color-scheme: dark;
}

/**
 * Tooltips
 */
[data-tooltip] {
  position: relative;
}

[data-tooltip]:before {
  background-color: hsla(214, 61%, 11%, 1);
  border-radius: 0.375rem;
  color: hsla(0, 0%, 95%, 1);
  content: attr(data-tooltip);
  left: 0;
  opacity: 0;
  padding: 0.25rem 0.5rem;
  position: absolute;
  text-align: center;
  text-transform: capitalize;
  top: 120%;
  transition: opacity 150ms ease-out;
  visibility: hidden;
  z-index: 1;
  width: max-content;
}
[data-tooltip][data-tooltip-align-right]:before {
  left: auto;
  right: 0;
}

[data-tooltip]:hover:before {
  opacity: 1;
  visibility: visible;
}

/* Dark mode */
html.dark .adaptive-icon {
  /* fill: white; */
  filter: invert(1);
}

.adaptive-icon {
  fill: black;
}
